<template>
  <div class="editor-content">
    <div class="editor-head">
      <div class="editor-title">源代码编辑器</div>
      <div class="editor-button-list">
        <div class="editor-button" @click="codeChange">
          <i class="el-icon-refresh"></i>
          <div class="editor-button-text">重置</div>
        </div>
        <div class="editor-button-card" @click="handleRun">
          <i class="el-icon-video-play"></i>
          <div class="editor-button-text">运行</div>
        </div>
      </div>
    </div>
    <codemirror v-model="codeSnippets" :options="cmOptions" />
  </div>
</template>
<script>
import { codemirror } from "vue-codemirror";
import "codemirror/lib/codemirror.css";

import "codemirror/theme/dracula.css";
import "codemirror/mode/javascript/javascript";

import { code as mainStart } from "./mixin/main/start/index.js";
import { code as mainEvent } from "./mixin/main/event/index.js";
import { code as metricScale } from "./mixin/draw/metricScale/index.js";
import { code as drawTool } from "./mixin/draw/drawTool/index.js";
import { code as mapSetting } from "./mixin/draw/mapSetting/index.js";
import { code as featurePoint } from "./mixin/feature/point/index.js";
import { code as featureLine } from "./mixin/feature/line/index.js";
import { code as featureArea } from "./mixin/feature/area/index.js";
import { code as baseShip } from "./mixin/ship/baseShip/index.js";
import { code as pointShip } from "./mixin/ship/pointShip/index.js";
import { code as realShip } from "./mixin/ship/realShip/index.js";
import { code as trajectoryDraw } from "./mixin/track/trajectoryDraw/index.js";
import { code as trajectoryAnimation } from "./mixin/track/trajectoryAnimation/index.js";
import { code as layerCenter } from "./mixin/layer/layerCenter/index.js";
import { code as layerDiy } from "./mixin/layer/layerDiy/index.js";
import { code as typhoon } from "./mixin/weather/typhoon/index.js";
import { code as weather } from "./mixin/weather/weather/index.js";

const codeList = {
  mainStart,
  mainEvent,
  metricScale,
  drawTool,
  mapSetting,
  featurePoint,
  featureLine,
  featureArea,
  baseShip,
  pointShip,
  realShip,
  trajectoryDraw,
  trajectoryAnimation,
  layerCenter,
  layerDiy,
  typhoon,
  weather,
};

export default {
  components: { codemirror },
  props: {
    codeTemplate: {
      default: "mainStart",
    },
  },
  data() {
    return {
      codeSnippets: "",
      cmOptions: {
        mode: "javascript",
        theme: "dracula",
        lineNumbers: true, // 显示行号
        line: true,
        lineWrapping: true, // 软换行
        foldGutter: true, // 折叠
        matchBrackets: true, // 括号匹配
        styleActiveLine: true, // 当前行背景高亮
        martIndent: true, // 自动缩进
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        indentUnit: 2, // 缩进单位，表示每一级缩进的空格数
        highlightDifferences: true,
        autorefresh: true,
        tabSize: 2,
        extraKeys: { Enter: "newlineAndIndentContinueComment" }, // 回车时保留当前缩进
      },
    };
  },
  methods: {
    codeChange() {
      this.codeSnippets = codeList[this.codeTemplate];
      this.handleRun();
    },
    handleRun() {
      console.log("code: ", JSON.stringify(this.codeSnippets));
      this.$emit("codeRun", this.codeSnippets);
    },
  },
};
</script>

<style scoped lang="scss">
.editor-content {
  .editor-head {
    background-color: #f6f6f6;
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0 0 0 10px;
    display: flex;
    justify-content: space-between;
    .editor-title {
      font-size: 12px;
    }
    .editor-button-list {
      display: flex;
      .editor-button {
        display: flex;
        align-items: center;
        margin-left: 10px;
        color: #333;
        cursor: pointer;
        i {
          margin-right: 3px;
          font-size: 16px;
        }
        .editor-button-text {
          font-size: 12px;
        }
        &:hover {
          color: #3189f3;
          .editor-button-text {
            font-weight: 700;
          }
        }
      }
      .editor-button-card {
        display: flex;
        align-items: center;
        height: 100%;
        color: #fff;
        background-color: #409eff;
        padding: 0 10px;
        margin-left: 15px;
        cursor: pointer;
        i {
          margin-right: 3px;
          font-size: 16px;
        }
        .editor-button-text {
          font-size: 12px;
        }
        &:hover {
          background-color: #5aabff;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.CodeMirror {
  height: calc(100vh - 30px - 59px - 41px);
  font-family: Arial, monospace; /* 使用等宽字体，例如 Fira Code */
  font-size: 16px;
  letter-spacing: 1.5px;
  line-height: 1.5;
  text-align: left; /* 代码文本左对齐 */
}
</style>
